/**
 * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */

import { Divider, Button, Dropdown, Menu } from '@arco-design/web-react';
import { IconUser } from '@arco-design/web-react/icon';
import { useState } from 'react';
import NetworkIndicator from '@/components/NetworkIndicator';
import utils from '@/utils/utils';
import Logo from '@/assets/img/Logo.svg';
import { useAuth } from '@/app/auth';
import LoginModal from '@/components/LoginModal';
import styles from './index.module.less';

interface HeaderProps {
  children?: React.ReactNode;
  hide?: boolean;
}

function Header(props: HeaderProps) {
  const { children, hide } = props;
  const { isAuthenticated, user, logout } = useAuth();
  const [loginVisible, setLoginVisible] = useState(false);

  const handleLoginClick = () => {
    setLoginVisible(true);
  };

  const userMenu = (
    <Menu>
      <Menu.Item key="username">
        <span>账户: {user?.username}</span>
      </Menu.Item>
      <Menu.Item key="logout" onClick={logout}>
        退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <div
      className={styles.header}
      style={{
        display: hide ? 'none' : 'flex',
      }}
    >
      <div className={styles['header-logo']}>
        {utils.isMobile() ? null : (
          <img src={Logo} alt="Logo" />
        )}
        <Divider type="vertical" />
        <span className={styles['header-logo-text']}>实时对话式 AI 面试官</span>
        <NetworkIndicator />
      </div>
      <div className={styles['header-user']}>
        {isAuthenticated ? (
          <Dropdown droplist={userMenu} position="br">
            <Button className={styles['user-button']} type="text" icon={<IconUser />}>
              {user?.username}
            </Button>
          </Dropdown>
        ) : (
          <Button type="text" onClick={handleLoginClick}>
            登录
          </Button>
        )}
      </div>
      {children}

      {/* 登录模态框 */}
      <LoginModal 
        visible={loginVisible} 
        onCancel={() => setLoginVisible(false)}
      />
    </div>
  );
}

export default Header;
